<template>
  <div class="container">
    <el-card style="margin: 10px 10px 0 10px">
      <el-row type="flex" justify="space-between" align="middle">
        <el-form :inline="true" :model="page">
          <el-form-item label-width="85px" label="学科名称" size="small">
            <el-input v-model.trim="page.subjectName" @keydown.enter.native="handleFilter"
              style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end" style="margin-top: -20px">
          <el-button size="small" type="success" icon="el-icon-edit" @click="updateBtn">新增学科</el-button>
        </el-row>
      </el-row>

      <el-row>
        <el-alert v-if="alertText !== ''" :title="alertText" type="info" :closable="false" show-icon>
        </el-alert>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table v-loading="loading" element-loading-text="给我一点时间" highlight-current-row :data="dataList"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template v-slot="{ row }">
              <span>{{ row.addDate | parseTime }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template v-slot="{ row }">
              <span>{{ row.isFrontDisplay === 1 ? "是" : "否" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="
                $router.push({
                  name: 'subjects-directorys',
                  params: { id: row.id },
                })
              ">学科分类</el-button>
              <el-button type="text" size="small" @click="
                $router.push({
                  name: 'subjects-tags',
                  params: { id: row.id },
                })
              ">学科标签</el-button>
              <el-button type="text" size="small" @click="updateBtn(row)">修改</el-button>
              <el-button type="text" size="small" @click="deleteBtn(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <PageTool type="" style="margin-top: 20px" :paginationPage="page.page" :paginationPagesize="page.pagesize"
          :total="page.total" @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange"></PageTool>
      </el-row>
      <!-- /分页 -->
    </el-card>
    <subjects-add :showDialog.sync="showDialog" ref="updateAdd"></subjects-add>
  </div>
</template>

<script>
// 列表，删除，
import { list, remove } from '../../api/hmmm/subjects'
// 分页组件
import PageTool from '../components/page-tool.vue'
// 预览弹层
import SubjectsAdd from '../components/subjects-add.vue'

export default {
  components: {
    PageTool,
    SubjectsAdd
  },
  data () {
    return {
      showDialog: false, // 预览弹层
      loading: false,
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        subjectName: null // 学科名称搜索框的内容
        // total: 0, // 总数
        // state: this.page.state
      },

      dataList: [], // 表单数据
      alertText: '' // aleart 提示信息
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList () {
      this.loading = true
      const { data } = await list(this.page)
      console.log(data)
      this.dataList = data.items
      this.page.total = data.counts
      this.alertText = `数据一共 ${this.page.total} 条`
      this.loading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.getList(this.page)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 搜索
    handleFilter () {
      this.page.page = 1
      this.getList()
    },
    // 清除
    resetForm () {
      this.page.subjectName = null
      this.page.page = 1
      this.getList()
    },
    // 删除组题列表
    async deleteBtn (data) {
      try {
        await this.$confirm('此操作将永久删除该文章, 是否继续？', '提示', {
          type: 'warning'
        })
        await remove(data)
        // 更新视图
        await this.getList()
        this.$message.success('删除文章成功')
      } catch (error) {
        console.log(error)
      }
    },
    async updateBtn (row) {
      // console.log(row)
      // console.log(data)
      await this.$refs.updateAdd.updateDirectory(row)
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .colInput {
    height: 35px;
  }

  .colright {
    float: right;
    height: 35px;
  }

  .subspan {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    margin-left: 10px;
  }

  .el-alert {
    margin-bottom: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }
}
</style>

<style scoped lang='scss'>
.container {
  .colInput {
    height: 35px;
  }

  .colright {
    float: right;
    height: 35px;
  }

  .subspan {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    margin-left: 10px;
  }

  .el-alert {
    margin-bottom: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }
}
</style>
